<template>
  <div class="edit-page">
    <div class="page-header">
      <el-button class="back-button" icon="el-icon-back" @click="goback">返回</el-button>
      <div class="page-title">人员信息{{ this.form.id?'编辑':'新增' }}</div>
    </div>
    <div class="page-body">
      <el-form
        inline
        label-width="175px"
        :model="form"
        ref="form"
        :rules="rules"
      >
        <div class="titleStyle">
          <span>基础信息</span>
        </div>
        <el-form-item prop="name" label="姓名">
          <el-input v-model="form.name" size="mini" />
        </el-form-item>
        <el-form-item prop="gender" label="性别">
          <el-select v-model="form.gender" size="mini">
            <el-option
              v-for="(item,index) in genderList"
              :key="index"
              :value="index"
              :label="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="contact" label="联系方式">
          <el-input v-model="form.contact" size="mini" />
        </el-form-item>
        <el-form-item prop="birthDate" label="出生日期">
          <el-date-picker
            v-model="form.birthDate"
            size="mini"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item prop="origin" label="籍贯">
          <el-input v-model="form.origin" size="mini" />
        </el-form-item>
        <el-form-item prop="ethnicGroup" label="民族">
          <el-input v-model="form.ethnicGroup" size="mini" />
        </el-form-item>
        <el-form-item prop="placeHouseholdRegistration" label="户籍所在地">
          <el-input v-model="form.placeHouseholdRegistration" size="mini" />
        </el-form-item>
        <el-form-item prop="homeAddress" label="家庭住址">
          <el-input v-model="form.homeAddress" size="mini" />
        </el-form-item>
        <el-form-item prop="identificationNumber" label="身份证号">
          <el-input v-model="form.identificationNumber" size="mini" />
        </el-form-item>
        <el-form-item prop="occupationWork" label="工作职业">
          <el-select v-model="form.occupationWork" size="mini">
            <el-option
              v-for="(item,index) in workList"
              :key="index"
              :value="index"
              :label="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="currentWorkUnit" label="现工作单位">
          <el-input v-model="form.currentWorkUnit" size="mini" />
        </el-form-item>
        <el-form-item label="照片">
          <el-upload
            v-model="form.photoId"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :multiple="false"
            :limit="1"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="titleStyle">
        <span>人物履历</span>
        <el-button type="success" size="mini" @click="add('resume')">添加</el-button>
      </div>
      <el-table
        :data="resumeData"
      >
        <el-table-column align="center" width="360" label="起止日期">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.date"
              size="mini"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="(val)=>changeDate(val,scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="人物履历">
          <template slot-scope="scope">
            <el-input
              size="mini"
              type="textarea"
              :rows="2"
              v-model="scope.row.characterBiog"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" width="80" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              style="color:#F56C6C;"
              @click="del(scope.$index,'resume')"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="titleStyle">
        <span>发展阶段</span>
        <el-button type="success" size="mini" @click="addStage">添加</el-button>
      </div>
      <el-table
        :data="stageData"
      >
        <el-table-column align="center" width="240" label="时间">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.developmentTime"
              size="mini"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="180" label="发展组织">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.developmentOrgName"/>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="180" label="所属支部">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.affiliationName"/>
          </template>
        </el-table-column>
        <el-table-column align="center" width="180" label="发展阶段">
          <template slot-scope="scope">
            <el-select size="mini" v-model="scope.row.develStage">
              <el-option
                v-for="(item,index) in statusList"
                :key="index"
                :label="item"
                :value="index"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" width="120" label="培养人">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.nurturingPeople"/>
          </template>
        </el-table-column>
        <el-table-column align="center" width="240" label="预计下一时间节点">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.expectedNextTimeNode"
              size="mini"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" width="80" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              style="color:#F56C6C;"
              @click="del(scope.$index,'stage')"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-footer">
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
    </div>
  </div>
</template>
<script>
import { add, edit } from '@/api/partyMemberManagement/developmentOfMembers'
export default {
  data () {
    return {
      form: {},
      resumeData: [],
      stageData: [],
      statusList: ['积极分子', '发展对象', '预备党员', '已转正', '延长预备期', '取消预备党员资格'],
      workList: ['党的机关、国家机关、群众团体和社会组织、企事业单位负责人', '专业技术人员', '办事人员和有关人员', '社会生产服务和生活服务人员', '农、林、牧、渔业生产及辅助人员', '生产制造及有关人员', '军人', '学生', '不便分类的其他从业人员', '退休'],
      genderList: ['男', '女'],
      rules: {
        name: [ { required: true, message: '请输入姓名', trigger: 'change' } ],
        gender: [ { required: true, message: '请选择性别', trigger: 'change' } ],
        contact: [ { required: true, message: '请输入联系方式', trigger: 'change' } ],
        birthDate: [ { required: true, message: '请选择出生日期', trigger: 'change' } ],
        origin: [ { required: true, message: '请输入籍贯', trigger: 'change' } ],
        ethnicGroup: [ { required: true, message: '请输入民族', trigger: 'change' } ],
        placeHouseholdRegistration: [ { required: true, message: '请输入户籍所在地', trigger: 'change' } ],
        homeAddress: [ { required: true, message: '请输入家庭住址', trigger: 'change' } ],
        identificationNumber: [ { required: true, message: '请输入身份证号', trigger: 'change' } ],
        occupationWork: [ { required: true, message: '请选择工作职业', trigger: 'change' } ],
        currentWorkUnit: [ { required: true, message: '请输入现工作单位', trigger: 'change' } ]
      }
    }
  },
  methods: {
    init (row) {
      this.form = { ...row }
      this.resumeData = row.deveCharacterBiographiesVOList || []
      this.stageData = row.developmentStageVOList || []
      this.resumeData.map((item) => {
        item.date = [item.startTime, item.endTime]
      })
    },
    goback () {
      this.form = {}
      this.resumeData = []
      this.stageData = []
      this.$emit('goback', false)
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let submitForm = add
          if (this.form.id) {
            submitForm = edit
          }
          delete this.form.deveCharacterBiographiesVOList
          delete this.form.developmentStageVOList
          this.resumeData.map((item) => {
            delete item.date
          })
          const obj = {
            ...this.form,
            deveCharacterBiographiesDTOList: this.resumeData,
            developmentStageDTOList: this.stageData
          }
          submitForm(obj).then((res) => {
            this.$message.success('保存成功')
            this.form = {}
            this.resumeData = []
            this.stageData = []
            this.$emit('goback', true)
          })
        }
      })
    },
    add (type) {
      const obj = {}
      console.log(this[`${type}Data`], 'data')
      this[`${type}Data`].unshift(obj)
    },
    addStage () {
      const obj = {}
      this.stageData.unshift(obj)
    },
    changeDate (val, row) {
      row.startTime = val[0]
      row.endTime = val[1]
    },
    del (index, type) {
      const arr = JSON.parse(JSON.stringify(this[`${type}Data`]))
      arr.splice(index, 1)
      this[`${type}Data`] = arr
    }
  }
}
</script>
<style scoped lang="scss">
  .page-header {
    display: flex;
    height: 60px;
    align-items: center;
    border-bottom: 1px solid #ddd;
    .back-button {
      margin-right: 16px;
    }
    .page-title {
      font-size: 18px;
      font-weight: 600;
    }
  }
  .page-body {
    height: calc(100vh - 190px);
    overflow-y: auto;
    .el-form-item {
      width: calc(50% - 24px);
      ::v-deep .el-input__inner {
        width: 300px;
      }
    }
    .titleStyle {
      font-weight: 600;
      height: 35px;
      line-height: 35px;
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 8px;
      background-color: #d8eff9;
      display: flex;
      justify-content: space-between;
    }
  }
  .page-footer {
    height: 60px;
    text-align: center;
    line-height: 60px;
  }
</style>
